<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>发布首页</title>
    <script src="./js/axios.min.js"></script>
    <link rel="stylesheet" href="css/home.css" />
    <link rel="stylesheet" href="js/jtnch.ttf" />
  </head>
  <body>
    <div class="fabu">
      <div class="fab1">
        <h1>快来发布商品吖~</h1>
        <div class="arc1">
          <h3>公告：今日凌晨2：00-5：00更新，很抱歉给您带来的不便！</h3>
        </div>
      </div>
      <div class="bu">
        商品图片：<input type="text" /><br />
        商品名称：<input type="text" /><br />
        商品价格：<input type="text" /><br />
        商品详情：<input type="text" /><br />
        点击按钮：<input type="button" value="发布" />
      </div>
    </div>
    <div class="lieb">
      <ul></ul>
      <div class="lie1">
        <h1>下滑查看更多哦~</h1>
      </div>
    </div>
    <script>
      let pagesize = 10;
      let pagenum = 0;
      //用户id
      let id = localStorage.getItem("id");
      let token = localStorage.getItem("token");
      laodList();
      //封装加载商品列表的函数---页面一开始需要加载商品列表--发布了商品
      function laodList() {
        let listAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
        axios
          .get(listAPI, {
            params: {
              pagesize,
              pagenum,
              uid: id,
            },
          })
          .then((r) => {
            console.log(r.data);
            //商品数组
            let productArr = r.data.data;
            // 根据商品数组-拼接字符串 给ul
            let str = "";
            productArr.forEach((pObj) => {
              str += `<li>
                        <h2>${pObj.pname}</h2>
                        <p style="color:red">￥${pObj.pprice}</p>
                        <p>${pObj.pid}</p>
                        <img src="${pObj.pimg}" alt="">
                        <p><button onclick="delProduct(${pObj.pid})">删除</button>
                        <a href="update.html?id=${pObj.pid}">修改</a></p>
                      </li>`;
            });
            document.querySelector("ul").innerHTML = str;
          });
      }
      //添加商品接口
      let ipts = document.querySelectorAll("input");
      ipts[4].onclick = function () {
        let pimg = ipts[0].value;
        let pname = ipts[1].value;
        let pprice = ipts[2].value;
        let pdesc = ipts[3].value;
        let addProductAPI =
          "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
        axios
          .get(addProductAPI, {
            params: {
              pimg,
              pname,
              pprice,
              pdesc,
              uid: id,
            },
          })
          .then((r) => {
            console.log(r.data);
            // 发布成功加载商品列表
            laodList();
          });
      };
      //删除函数
      async function delProduct(pid) {
        console.log(pid);
        // 准备删除接口参数
        let params = { pid, uid: id, token };
        console.log(params);
        let productDelteAPI =
          "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
        let res = await axios.get(productDelteAPI, { params: params });
        console.log(res.data);
        // 调用加载列表
        laodList();
      }
    </script>
  </body>
</html>
